import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/page/shopping_car/xin_he_goods_payment/xin_he_payment_methods_model.dart';
import 'package:xin_he/routes/xin_he_routes.dart';

import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_image.dart';
import '../../../utils/xin_he_order_utils.dart';
import '../models/xin_he_goods_model.dart';
import '../xin_he_shopping_car/xin_he_shop_cart_goods_entity.dart';
import 'xin_he_goods_payment_logic.dart';

class XinHeGoodsPaymentPage extends StatelessWidget {
  XinHeGoodsPaymentPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeGoodsPaymentLogic());
  final state = Get.find<XinHeGoodsPaymentLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: const EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        backgroundColor: XinHeColor('#00DDDD'),
        shadowColor:  Colors.transparent,
        title: Text('确认订单',style: TextStyle(color:XinHeColor('#222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: Obx(() => Stack(children: [

        ListView(
          padding: const EdgeInsets.only(top: 0),
          children: [

            Container(
              margin: const EdgeInsets.symmetric(horizontal: 15,vertical: 15),
              decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
              child: Column(children: [
                const SizedBox(height: 10,),

                ///门店自提与配送
                SizedBox(
                  height: 38+4.5,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          GestureDetector(
                            onTap: (){
                              logic.tabSelectedIndex(0);
                            },
                            child: Container(
                                margin: EdgeInsets.only(top:state.tabIndex.value==0? 0:4.5,bottom:state.tabIndex.value==0?  4.5:0),
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    color: state.tabIndex.value==0?XinHeStyle.mainGreenColor:Colors.transparent,
                                    borderRadius: BorderRadius.circular(19)
                                ),
                                height: 38,
                                padding: const EdgeInsets.symmetric(horizontal: 25),
                                child: Text('门店自提',style:
                                TextStyle(color: state.tabIndex.value==0?XinHeColor('#2B3131'):XinHeColor('#5F6868'),fontSize: state.tabIndex.value==0?15:14,fontWeight: state.tabIndex.value==0?FontWeight.w600:FontWeight.w500),
                                )
                            ),
                          ),
                          // SizedBox(height: 4.5,)
                        ],
                      ),
                      Column(
                        children: [
                          GestureDetector(
                            onTap: (){
                              logic.tabSelectedIndex(1);
                            },
                            child: Container(
                                margin: EdgeInsets.only(top:state.tabIndex.value==0? 4.5:0,bottom: state.tabIndex.value==0? 0:4.5),
                                height: 38,
                                padding: const EdgeInsets.symmetric(horizontal: 25),
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  color: state.tabIndex.value==1?XinHeStyle.mainGreenColor:Colors.transparent,
                                  borderRadius: BorderRadius.circular(19)
                                ),
                                child: Text('快递配送',style:
                                TextStyle(color: state.tabIndex.value==1?XinHeColor('#2B3131'):XinHeColor('#5F6868'),fontSize: state.tabIndex.value==1?15:14,fontWeight: state.tabIndex.value==1?FontWeight.w600:FontWeight.w500),
                                )
                            ),
                          ),
                        ],
                      ),
                    ],),
                ),
                ///门店地址
                GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: (){
                    if(state.tabIndex.value == 1){
                      Get.toNamed(XinHeRoutes.addressManagement);
                    }
                    if(state.tabIndex.value == 0) {

                    }
                  },
                  child: SizedBox(
                    width: Get.width-60,
                    child: Row(children: [
                      const XinHeAssetImage('assets/images/cart/pay_location.png',width: 15,height: 19,),
                      const SizedBox(width: 5,),
                      SizedBox(
                        width: Get.width-60 - 15-5-6-10,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(height: 5,),
                            Text(state.tabIndex.value == 1?logic.addressName.value:'',style: TextStyle(color: XinHeColor('#222222'),fontSize: 13,fontWeight: FontWeight.w600),),
                            Text(state.tabIndex.value == 1?logic.addressStr.value:'',
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(color: XinHeColor('#777777'),fontSize: 12,fontWeight: FontWeight.w600),)
                          ],),
                      ),
                      SizedBox(width: 10,),
                      const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),

                    ],),
                  ),
                ),

                ///商品信息
                Container(
                    width: double.infinity,
                    margin: EdgeInsets.only(top: 15),
                    height: logic.goodsHeight.value,
                    child: ListView.builder(
                        physics: const NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: logic.goodsList.length,
                        itemBuilder: (ctx,index){
                          XinHeShopCartGoodsEntity model = logic.goodsList[index];
                          return Container(
                            // margin: const EdgeInsets.symmetric(horizontal: 15),
                            decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(7)),

                            child:Column(children: [
                              Container(
                                height: 44,
                                alignment: Alignment.centerLeft,
                                // color: Colors.red,
                                child: Row(children: [
                                  // const XinHeAssetImage('assets/images/cart/cart_unselected.png',width: 18,height: 18,),
                                  ///选择
                                  // GestureDetector(
                                  //   onTap: (){
                                  //     // model.selected = !model.selected;
                                  //     // logic.state.allItemsList[index] = model;
                                  //
                                  //     // logic.handleGoods(index);
                                  //   },
                                  //   child: Padding(
                                  //     padding: const EdgeInsets.only(left: 15,right: 8),
                                  //     child: XinHeAssetImage( model.isSelected?'assets/images/cart/cart_selected.png' :'assets/images/cart/cart_unselected.png',width:18 ,height: 18,),
                                  //   ),
                                  // ),
                                  const SizedBox(width: 5,),
                                  Text( XinHeOrderUtils.getZoneTitle(model.zoneType??0),style: TextStyle(color: XinHeColor('#282C2C'),fontSize: 16,fontWeight: FontWeight.w600),),
                                  const SizedBox(width: 3,),
                                  const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),
                                  Spacer(),


                                ],),),

                              ListView.builder(
                                  physics: const NeverScrollableScrollPhysics(),
                                  shrinkWrap: true,
                                  itemCount: model.orderItems?.length,
                                  itemBuilder: (ctx,ind){
                                    XinHeShopCartGoodsOrderItems item = model.orderItems![ind];
                                    return _itemNView(item, ind, index);
                                  }),

                            ],) ,
                          );
                        })),

                //合计
                Container(
                  alignment: Alignment.centerRight,
                  padding: const EdgeInsets.only(right: 15),
                  height: 40,
                  child:   RichText(text: TextSpan(children: [
                    TextSpan(text:'共${logic.totalCount.value}件合计：',style: TextStyle(color: XinHeColor('#666666'),fontSize: 12)),
                    TextSpan(text: '${logic.totalAmount.value}',style: TextStyle(color: XinHeColor('#E84128'),fontSize: 12))
                  ])),
                ),
              ],),
            ),

            ///总金额
            Container(
            margin: const EdgeInsets.symmetric(horizontal: 15),
            height: 210,
            decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
            child: Column(children: [
              totalAmountItemWidget('总金额','${logic.totalAmount.value}'),
              // totalAmountItemWidget('消费金红包','暂无可用'),
              Container(
                height: 42,
                alignment: Alignment.center,
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Row(children: [
                  const XinHeAssetImage('assets/images/cart/pay_method_redbag.png',width:12,height:14),
                  SizedBox(width: 5,),
                  Text('消费金红包',style: TextStyle(color: XinHeColor('#222222'),fontSize: 13),),
                  Spacer(),
                  Text('暂无可用',style: TextStyle(color: XinHeColor('#B0B0B0'),fontSize: 15),),

                ],),
              ),

              totalAmountItemWidget('运费',state.tabIndex.value == 0 ?'0.00':'10.00'),
              totalAmountItemWidget('实际支付',logic.getActualAmount()),
              Container(
                height: 42,
                alignment: Alignment.center,
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Row(children: [
                  Text('订单备注',style: TextStyle(color: XinHeColor('#222222'),fontSize: 13),),
                  Spacer(),
                  Container(
                    width: 130,
                    height: 42,
                    alignment: Alignment.centerRight,
                    child: TextField(
                      // maxLength: 8,
                      maxLines: 1,
                      keyboardType: TextInputType.text,
                      textAlign: TextAlign.right,
                      onChanged: (value){
                        // callback(value);
                        print('222$value');
                        logic.remark.value = value;
                      },
                      style:  TextStyle(
                          color: XinHeColor("#15161F"), fontSize: 14 ,fontWeight: FontWeight.w400),
                      decoration:  InputDecoration(
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.only(bottom: 2),
                          hintText: '填写备注信息',
                          counterStyle: TextStyle(
                              color: XinHeColor("#A6A6A6"), fontSize: 13),
                          hintStyle:  TextStyle(
                              color: XinHeColor("#A6A6A6"), fontSize: 13)),
                    ),
                  ),

                ],),
              )


            ],),
          ) ,


          ////支付方式
          // Container(
          //   margin: const EdgeInsets.symmetric(horizontal: 15).copyWith(top: 15),
          //   height: 340,
          //   decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
          //   child:Column(children: [
          //     Container(
          //       height:40,
          //         alignment: Alignment.centerLeft,
          //         padding:const EdgeInsets.symmetric(horizontal: 15),
          //         child: Text('支付方式',style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.w500),)),
          //     ListView.builder(
          //         padding: EdgeInsets.zero,
          //         physics: const NeverScrollableScrollPhysics(),
          //         shrinkWrap: true,
          //         itemCount:logic.payMethodsList.length,
          //         itemBuilder: (ctx,index){
          //           XinHePaymentMethodModel model = logic.payMethodsList[index];
          //           return Container(
          //             height: 50,
          //             child: Row(children: [
          //               const SizedBox(width: 15,),
          //               XinHeAssetImage('assets/images/cart/${logic.iconList[index]}.png',width:17.5,height:17.5),
          //               const SizedBox(width: 5,),
          //               Text(logic.titleList[index],style: TextStyle(color: XinHeColor('#222222'),fontSize: 13),),
          //               Spacer(),
          //               ///选择
          //               GestureDetector(
          //                 onTap: (){
          //
          //                   if(!model.selected){
          //                     model.selected = !model.selected;
          //                   }
          //                   logic.payMethodsList[index] = model;
          //                   logic.selectedIndex.value = index;
          //
          //                   for(int i =0;i<logic.payMethodsList.length;i++){
          //                     if(i!=index){
          //                       XinHePaymentMethodModel model = logic.payMethodsList[i];
          //                       model.selected = false;
          //                     }
          //                   }
          //                 },
          //                 child: Padding(
          //                   padding: const EdgeInsets.only(left: 15,right: 15),
          //                   child: XinHeAssetImage( model.selected?'assets/images/cart/cart_selected.png' :'assets/images/cart/cart_unselected.png',width:18 ,height: 18,),
          //                 ),
          //               ),
          //             ],),
          //           );
          //         })
          //   ],)
          // ),

          const SizedBox(height: 60+15,),




        ],),


        ///提交订单
        Positioned(
            bottom: 0,
            child: SizedBox(
              // height: 60,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    height: 60,
                    width: Get.width,
                    color: Colors.white,
                    child: Row(children: [
                      const Spacer(),
                      RichText(text: TextSpan(children: [
                        TextSpan(text:'共${logic.totalCount.value}件',style: TextStyle(color: XinHeColor('#666666'),fontSize: 12)),
                        TextSpan(text: '合计：${logic.getActualAmount()}',style: TextStyle(color: XinHeColor('#222222'),fontSize: 17))
                      ])),
                      GestureDetector(
                        onTap: (){

                          logic.commitOrder();
                        },
                        child: Container(
                          height: 35,
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                          margin: const EdgeInsets.symmetric(horizontal: 15),
                          decoration: BoxDecoration(
                            gradient: LinearGradient(colors: [XinHeColor('#F89A30'),XinHeColor('#E84128')]),
                            borderRadius: BorderRadius.circular(17.5),
                          ),
                          alignment: Alignment.center,
                          child: Text('提交订单',style: TextStyle(color: XinHeColor('#FFFFFF'),fontSize: 14)),

                        ),
                      )
                    ],),
                  ),
                  Container(
                    height: Get.mediaQuery.padding.bottom,
                    color: Colors.white,
                  ),
                ],),
            ))
      ],)),

    );
  }



  Widget _itemView(XinHeGoodsModel model,int index){
    return Stack(
      children: [
        Container(
          color: Colors.white,
          width: Get.width-30,
          height: 120,

          child:  Row(
            children: [

              const Padding(
                padding:  EdgeInsets.only(left: 0,top: 15,right: 15,bottom: 15),
                child: XinHeAssetImage('assets/images/home/tmp.png',width: 80,height: 80,fit: BoxFit.fill,),
              ),

              ///描述与价格数量
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                      width:Get.width-30-30-80-15-15,
                      child: Text('一级冷榨有机野山茶籽油500ML级冷榨有机野iii',maxLines: 2,softWrap: true,style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.bold),)
                  ),
                  const SizedBox(height: 20,),



                  SizedBox(
                    width:Get.width-30-30-80-15-15,
                    height: 23,
                    child: Row(
                      children: [

                        RichText(
                            text: TextSpan(children: [
                              ///￥
                              TextSpan(
                                text: '￥',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 9,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                              ///
                              TextSpan(
                                text: '${model.price}',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                            ]
                            )),
                        const Spacer(),

                        Text('x${model.count}',style: TextStyle(color: XinHeColor('#8B9191'), fontSize: 12, fontWeight: FontWeight.w500,)
                        ),
                        const SizedBox(width: 0,)

                      ],
                    ),
                  )

                ],)


            ],
          ),
        ),

        Positioned(
          bottom: 0,
          right: 0,
          child: Container(
            width: Get.width-30-30,
            color: XinHeColor('#E7EEEE'),
            height: 0.5,),
        )

      ],
    );
  }

  Widget _itemNView(XinHeShopCartGoodsOrderItems model,int index,int fatherIndex){
    return Stack(
      children: [
        Container(
          color: Colors.white,
          // width: Get.width-30,
          width: double.infinity,
          padding: EdgeInsets.symmetric(horizontal: 15),
          height: 120,
          child:  Row(
            children: [

              ///选择
              // GestureDetector(
              //   onTap: (){
              //     // model.selected = !model.selected;
              //     // logic.state.allItemsList[index] = model;
              //
              //     // logic.handleGoodsItem(index, fatherIndex);
              //   },
              //   child: Padding(
              //     padding: const EdgeInsets.only(left: 15,right: 8),
              //     child: XinHeAssetImage( model.isSelected?'assets/images/cart/cart_selected.png' :'assets/images/cart/cart_unselected.png',width:18 ,height: 18,),
              //   ),
              // ),


               Padding(
                padding:  EdgeInsets.only(left: 0,top: 15,right: 15,bottom: 15),
                child: XinHeNetImage(url: model.goodsIconPath??'',width: 90,height: 90,fit: BoxFit.fill,),
              ),

              ///描述与价格数量
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                      width:Get.width-30-15-18-8-90-15,
                      child: Text(model.goodsName??'',maxLines: 2,softWrap: true,style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.bold),)
                  ),
                  const SizedBox(height: 20,),



                  SizedBox(
                    width: Get.width-30-15-18-8-90-15,
                    height: 23,
                    child: Row(
                      children: [

                        RichText(
                            text: TextSpan(children: [
                              ///￥
                              TextSpan(
                                text: '￥',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 9,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                              ///
                              TextSpan(
                                text: '${model.goodsPrice}',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                            ]
                            )),
                        const Spacer(),

                        Text('x${model.goodsAmount}',style: TextStyle(color: XinHeColor('#8B9191'), fontSize: 12, fontWeight: FontWeight.w500,)
                        ),
                        const SizedBox(width: 15,)

                      ],
                    ),
                  )

                ],)


            ],
          ),
        ),

        Positioned(
          bottom: 0,
          right: 15,
          child: Container(
            width: Get.width-30-30,
            color: XinHeColor('#E7EEEE'),
            height: 0.5,),
        )

      ],
    );
  }


  Widget  totalAmountItemWidget(String title,String titleValue){
    return Container(
      height: 42,
      alignment: Alignment.center,
      padding: const EdgeInsets.symmetric(horizontal: 15),
      child: Row(children: [
        Text(title,style: TextStyle(color: XinHeColor('#222222'),fontSize: 13),),
        Spacer(),
        Text(titleValue,style: TextStyle(color: XinHeColor('#222222'),fontSize: 15),),

      ],),
    );
  }

}
